<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<title>绑定产品</title>
		<link rel="stylesheet" href="./css/style.css">
		<script src="js/vue.min.js"></script>
		<script src="js/vue-resource.min.js"></script>
		<style type="text/css">
			.fillin {
				padding: 40px 0;
			}

			.fillin .product-bind-inp {
				padding: 0;
				margin: 20px auto 0;
				height: 50px;
				width: 270px;

			}

			.product-bind-mask {
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.8);
				position: fixed;
				z-index: 99;
				left: 0;
				top: 0;
			}

			.product-bind-pop {
				width: 60%;
				text-align: center;
				padding: 20px;
				box-sizing: border-box;
				background: #fff;
				border-radius: 15px;
				position: fixed;
				z-index: 999;
				left: 20%;
				top: 30%;
			}

			.product-bind-pop p {
				margin: 15px 0;

			}

			.product-not-find-mask {
				position: fixed;
				z-index: 999;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				background: rgba(0, 0, 0, 0.7);
			}

			.product-not-find-pop {
				width: 90%;
				background: #fff;
				border-radius: 10px;
				height: 90%;
				position: fixed;
				z-index: 999;
				left: 5%;
				overflow: auto;
				top: 5%;
				/* padding:25px; */
				box-sizing: border-box;
			}

			.product-not-find-close {
				width: 40px;
				height: 30px;
				border-radius: 0px 10px 0px 10px;
				background: #d4d4d4;
				color: #fff;
				font-size: 17px;
				text-align: center;
				line-height: 30px;
				display: inline-block;
				float: right;
			}

			.product-not-find-pop .not-find-title {
				font-size: 19px;
				padding: 50px 0 30px;
				text-align: center;
			}

			.product-not-find-pop .not-find-prompt {
				font-size: 15px;
				padding: 10px 0 10px 20px;
				box-sizing: border-box;
				background: #F3F3F3;
				border-radius: 30px 0 0 30px;
				margin: 20px -25px 0 10%;
				width: 90%;
			}

			.product-not-find-pop .not-find-plase {
				background: none;
				padding: 0px 0 0px 20px;
				color: #B0343D;
				margin: 10px -25px 0 10%;
			}

			.product-not-find-pop .not-find-img {
				width: 90px;
				height: 90px;
				margin: 25px 0 25px 10%;
			}

			.product-not-find-pop .describe {
				width: 100%;
				background: #f2f2f2;
				position: relative;
				width: 100%;
				height: 120px;
				border-radius: 10px;
				padding: 15px;
				box-sizing: border-box;
				font-size: 14px;
			}

			.no-find-btn {
				width: 160px;
				height: 45px;
				line-height: 45px;
				text-align: center;
				font-size: 16px;
				color: #fff;
				background: #080A53;
				margin: 30px auto;
				border-radius: 8px;
				display: block;
			}

			.not-find-img-box input {
				position: absolute;
				z-index: 99;
				width: 45px;
				margin: 20px -120px 0;
				height: 70px;
				background: transparent;
				opacity: 0;
			}

			.add-img {
				padding: 0 25px;

			}

			.add-img img {
				border-radius: 10px;
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<div id="product-bind">
			<div class="logo">
				<img src="./img/logo.png">
				<h1>安盟股份</h1>
			</div>
			<div class="fillin">
				<p>输入产品序列号查询并绑定产品</p>
				<input class="product-bind-inp" type="stylesheet" v-model="serial_number" placeholder="点击这里输入">
			</div>
			<button type="confirm" class="button_1" @click="bindProductNum">确定 </button>

			<!-- 绑定成功提示弹框 -->
			<div class="product-bind-mask" @click="closeProductPop" v-if="productBindSuc"></div>
			<div class="product-bind-pop" v-if="productBindSuc">
				<img src="img/icon_succeed.png">
				<p>{{productBindMsg}}</p>
			</div>
			<!-- 绑定失败提示弹框 -->
			<div class="product-bind-mask" v-if="bindFail"></div>
			<div class="product-bind-pop" v-if="bindFail">
				<img src="img/icon_succeed.png">
				<p>绑定失败，请输入正确的序列号</p>
			</div>
			<!-- 绑定失败提示弹框 -->
			<div class="product-bind-mask" v-if="bindBeyond"></div>
			<div class="product-bind-pop" v-if="bindBeyond">
				<img src="img/cry.png">
				<p>绑定人数已达上限</p>
			</div>

			<!-- 未查到此产品 上传商品信息 弹框 -->
			<div class="product-not-find-mask" v-if="addProductMask"></div>
			<div class="product-not-find-pop" v-if="addProductMask">
				<span class="product-not-find-close" @click="closeNotProductPop">X</span>
				<p class="not-find-title">抱歉，没有查到此产品</p>
				<div class="not-find-prompt">
					请拍照上传产品信息
				</div>
				<p class="not-find-prompt not-find-plase">请确保拍摄图片清晰可见</p>
				<div class="not-find-img-box">
					<img class="not-find-img" src="img/photo_add.png">
					<input type="file" accept="image/*" capture="" id="fileUpload" @change="add_img">
				</div>
				<div class="add-img">
					<img class="not-find-img" v-for='(item ,index ) in imgs' :src="item" style="margin: 25px 5px;">
				</div>
				<textarea class="describe" rows="" cols="" placeholder="文字描述这里输入" v-model="text_detail"></textarea>
				<button class="no-find-btn" type="button" @click="addProduct">确定</button>

			</div>
		</div>


		<script>
			new Vue({
				el: "#product-bind",
				data: {
					url: 'https://newwk.sjwke.com/app/index.php?i=62&c=entry&do=front&m=smc_zhongchou',
					serial_number: '',
					user_id: '',
					productBindMsg: '',
					productBindSuc: false,
					text_detail: '',
					addProductMask: false,
					
					bindFail:false,//绑定失败
					bindBeyond:false,//绑定超出

					imgs: [],
					imgData: {
						accept: 'image/gif, image/jpeg, image/png, image/jpg',
					}
				},

				methods: {
					// 提交产品信息
					addProduct() {
						let that = this
						let text_detail = that.text_detail
						// 用户反馈接口   传参op=apply   user_id 用户的   icon 图片（字符串多个以','隔开） content   内容
						this.$http.post(that.url, {
							op: 'apply',
							icon: that.imgs.join(','),
							content: text_detail,
							user_id: that.user_id
						}, {
							emulateJSON: true
						}).then(function(res) {
							console.log(res)
							if (res.body.status == 0) {

								this.productBindMsg = res.body.msg
								this.productBindSuc = !this.productBindSuc
								this.addProductMask = !this.addProductMask
								setTimeout(function() {
									// window.location.href = "./product_list.html";
								}, 1000)
							}
						}, function(res) {
							console.log(res.status);
						});
					},
					// 上传图片
					add_img(event) {
						let reader = new FileReader();
						let img1 = event.target.files[0];
						let type = img1.type; //文件的类型，判断是否是图片
						let size = img1.size; //文件的大小，判断图片的大小
						if (this.imgData.accept.indexOf(type) == -1) {
							alert('请选择我们支持的图片格式！');
							return false;
						}
						if (size > 3145728) {
							alert('请选择3M以内的图片！');
							return false;
						}
						var uri = ''
						let form = new FormData();
						form.append('upfile', img1, img1.name);
						// 上传图片接口   传参 op=uploadimage    name=upfile
						this.$http.post(this.url + "&op=uploadimage", form, {
							headers: {
								'Content-Type': 'multipart/form-data'
							}
						}).then(res => {
							console.log(res.data)
							uri = res.data.img
							reader.readAsDataURL(img1);

							var that = this;
							reader.onloadend = function() {
								that.imgs.push(uri);
							}
							alert(res.data.msg)
						}).catch(error => {
							alert('上传图片出错！');
						})
					},
					// ====================================================================================================
					// 点击关闭遮罩
					closeProductPop() {
						this.productBindSuc = !this.productBindSuc
					},
					closeNotProductPop() {
						this.addProductMask = !this.addProductMask
					},
					// 
					// 绑定产品序列号
					bindProductNum() {
						let that = this
						that.getUserInfo()
						// 绑定产品接口    传参op=binding   serial_number序列号  user_id   用户id
						// status = 0 绑定成功  status =1 绑定失败  status =2 产品已超出绑定人数     status =3 产品已绑定  status =4  产品不存在
						// anmeng456    qwert123456   qwert789456  序列号
						this.$http.post(that.url, {
							op: 'binding',
							serial_number: that.serial_number,
							user_id: that.user_id
						}, {
							emulateJSON: true
						}).then(function(res) {
							console.log(res)
							if (res.body.status == 0) {
								alert(res.body.msg)
								this.productBindMsg = '绑定成功，稍后跳转产品页面'
								this.productBindSuc = !this.productBindSuc
								setTimeout(function() {
									window.location.href = "./product_list.html";
								}, 1000)

							} else if (res.body.status == 4) {
								this.addProductMask = !this.addProductMask
							} else if(res.body.status == 1){
								this.bindFail = true;
								setTimeout(function(){
									this.bindFail = false;
								},1000)
							}else if(res.body.status == 2){
								this.bindBeyond = true;
								setTimeout(function(){
									this.bindBeyond = false;
								},1000)
							}

						}, function(res) {
							console.log(res.status);
						});
					},
					// 获取用户信息
					getUserInfo() {
						let that = this
						let userInfo = JSON.parse(window.localStorage.userInfo)
						console.log(JSON.parse(window.localStorage.userInfo))
						that.user_id = userInfo.data.id
					},

				},
				created() {
					this.getUserInfo(),
						this.avatar = this.imgUrl
				}
			})
		</script>
	</body>
</html>
